<script setup >
/**
 * element-plus图标使用
 * npm install @element-plus/icons-vue
 */
import {Edit, Message} from '@element-plus/icons-vue'
// import {ElNotification} from "element-plus";
// import {ElMessage, ElMessageBox} from "element-plus";

const size = ref(20)
const color = ref("#409EFF")


const open4 = () => {
    ElMessage({
        message: '这是一条错误消息',
        type: 'error',
    })
}
const open = () => {
    ElMessageBox.alert('This is a message', 'Title', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: 'OK',
        callback: () => {
            ElMessage({
                type: 'info',
                message: `action`,
            })
        },
    })

}

const open1 = () =>{
    ElNotification({
        title: 'Prompt',
        message: 'This is a message that does not automatically close',
        duration: 0,
    })
}
</script>

<template>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M15 12h-3m0 0H9m3 0V9m0 3v3"/></g></svg>
        <el-button :plain="true" @click="open4">Error</el-button>
        <el-icon><i-ep-Search /></el-icon>
        <el-icon color="#409efc" :size="40"><i-ep-Clock /></el-icon>
        <el-popover
            placement="top-start"
            title="Title"
            :width="200"
            trigger="hover"
            content="this is content, this is content, this is content"
        >
            <template #reference>
                <el-button class="m-2">Hover to activate</el-button>
            </template>
        </el-popover>

        <el-button plain @click="open">Click to open the Message Box</el-button>
        <el-button plain @click="open1"> Closes automatically </el-button>
    </div>
</template>

<style scoped></style>
